<!DOCTYPE html>
<html ng-app="app" lang="en">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="../../style/css/matrix-style.css">
        <link rel="stylesheet" href="datepicker.css">
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="../i18n/angular-locale_zh-cn.js"></script>
        <script src="../common/is-class.js"></script>
        <script src="../common/position.js"></script>
        <script src="../common/dateparser.js"></script>
        <script src="datepicker.js"></script>
        <script>
            // bootstrap app
            var app = angular.module('app', ['a.ui']);
            app.controller('DatepickerDemoCtrl', function ($rootScope, $scope) {
                $rootScope.title = 'Datepicker';
                $scope.today = function () {
                    $scope.dt = new Date();
                };
                $scope.today();

                $scope.clear = function () {
                    $scope.dt = null;
                };

                $scope.inlineOptions = {
                    customClass: getDayClass,
                    minDate    : new Date(),
                    showWeeks  : true
                };

                $scope.dateOptions = {
                    dateDisabled: disabled,
                    formatYear  : 'yy',
                    maxDate     : new Date(2020, 5, 22),
                    minDate     : new Date(),
                    startingDay : 1
                };

                // Disable weekend selection
                function disabled(data) {
                    var date = data.date,
                        mode = data.mode;
                    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
                }

                $scope.toggleMin = function () {
                    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
                    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
                };

                $scope.toggleMin();

                $scope.open1 = function () {
                    $scope.popup1.opened = true;
                };

                $scope.open2 = function () {
                    $scope.popup2.opened = true;
                };

                $scope.setDate = function (year, month, day) {
                    $scope.dt = new Date(year, month, day);
                };

                $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
                $scope.format = $scope.formats[0];
                $scope.altInputFormats = ['M!/d!/yyyy'];

                $scope.popup1 = {
                    opened: false
                };

                $scope.popup2 = {
                    opened: false
                };

                var tomorrow = new Date();
                tomorrow.setDate(tomorrow.getDate() + 1);
                var afterTomorrow = new Date();
                afterTomorrow.setDate(tomorrow.getDate() + 1);
                $scope.events = [
                    {
                        date  : tomorrow,
                        status: 'full'
                    },
                    {
                        date  : afterTomorrow,
                        status: 'partially'
                    }
                ];

                function getDayClass(data) {
                    var date = data.date,
                        mode = data.mode;
                    if (mode === 'day') {
                        var dayToCheck = new Date(date).setHours(0, 0, 0, 0);

                        for (var i = 0; i < $scope.events.length; i++) {
                            var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);

                            if (dayToCheck === currentDay) {
                                return $scope.events[i].status;
                            }
                        }
                    }

                    return '';
                }
            })
        </script>
    </head>
    <body>
        <div class="container" ng-controller="DatepickerDemoCtrl">
            <h1 class="text-center" ng-bind="title"></h1>
            <div>
                <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
                <h4>Inline</h4>
                <div style="display:inline-block; min-height:290px;">
                    <a-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></a-datepicker>
                </div>
                <h4>Popup</h4>
                <div class="row">
                    <div class="col-md-6">
                        <p class="input-group">
                            <input type="text" class="form-control" a-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" alt-input-formats="altInputFormats"/>
                                 <span class="input-group-btn">
                                   <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
                                 </span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p class="input-group">
                            <input type="text" class="form-control" a-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true"/>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
                                </span>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats">
                        <option></option>
                    </select>
                    </div>
                </div>
                <hr/>
                <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
                <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
                <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
                <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" title="After today restriction">Min date</button>
            </div>
        </div>
    </body>
</html>